<template>
  <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
    <swiper-item
        v-for="item in home"
        :key="item.id"
        class="swiper-item"
        @click="clickSwiper(item)"
    >
      <v-image :url="item.image.path" v-if="item.image" :width="'710rpx'" :height="'500rpx'" />
    </swiper-item>
  </swiper>
</template>

<script>
import config from '../../../../config/config'
import Image from '../../../../components/image/index'
import { goTo } from '../../../../util/util'

export default {
  props: ['home'],
  components: {
    'v-image': Image
  },
  data() {
    return {
      baseUrl: config.baseUrl
    }
  },
  methods: {
    clickSwiper(item) {
      goTo(item)
    }
  },
  created() {

  },
  mounted() {
  },

}
</script>

<style scoped lang="scss">
$width: 710rpx;
$height: 200rpx;

.swiper {
  height: $height;
  margin: 20rpx;
  //background: black;
  /* 圆角 */
  border-radius: 10rpx;
  overflow: hidden;
  /* 兼容ISO圆角 */
  transform: translateY(0);
  .swiper-item {
    //width: $width;
    //height: $height;
  }
}
</style>
